<template>
<div>
<!--  面包屑导航区域 -->
  <br>
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item>首页</el-breadcrumb-item>
    <el-breadcrumb-item>员工管理</el-breadcrumb-item>
    <el-breadcrumb-item>员工信息</el-breadcrumb-item>
  </el-breadcrumb>

  <!--  卡片视图区域-->
  <el-card >
    <!--搜索与添加区域-->
    <el-row :gutter="30">
      <el-col :span="3.5">
        <el-switch
          style="display: block;padding-top: 10px"
          v-model="searchUserState"
          active-color="#13ce66"
          inactive-color="#ff4949"
          active-text="在职"
          inactive-text="已离职">
        </el-switch>
      </el-col>
      <el-col :span="7">
        <el-input placeholder="请输入用户编号或姓名"
                  v-model="searchUserIDorName">
          <el-button slot="append" icon="el-icon-search"
          @click="searchUser"></el-button>
        </el-input>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="addDialogVisible=true">
          添加用户</el-button>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="getUserItem">全部用户</el-button>
      </el-col>
    </el-row>

    <!--  用户清单页面区域  -->
    <el-table :data="this.userList" border stripe height="490">
      <el-table-column type="index"></el-table-column>
      <el-table-column label="账号" prop="userID"></el-table-column>
      <el-table-column label="姓名" prop="username"></el-table-column>
      <el-table-column label="账号权限" prop="roleIDTip"></el-table-column>
      <el-table-column label="是否在职" prop="isOnJobTip"></el-table-column>
      <el-table-column label="电话" prop="tel" width="250px"></el-table-column>
      <el-table-column label="入职时间" prop="hireDate"></el-table-column>
      <el-table-column label="账号密码" prop="password"></el-table-column>
      <el-table-column label="操作" prop="quantity" width="200px">
        <template slot-scope="scope">
<!--          修改按钮-->
          <el-tooltip  effect="dark" content="修改" placement="top" :enterable="false">
            <el-button type="primary" icon="el-icon-edit" size="mini"
                       @click="showEditDialog(scope.row)"></el-button>
          </el-tooltip>
<!--          删除按钮-->
          <el-tooltip  effect="dark" content="用户离职" placement="top" :enterable="false">
            <el-button type="danger" icon="el-icon-delete" size="mini"
                       @click="removeUserByID(scope.row.userID)"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

  </el-card>

  <!--  添加用户的对话框-->
  <el-dialog title="添加用户"
    :visible.sync="addDialogVisible" width="30%"
  @close="addDialogClosed">
<!--    内容主题区域-->
    <el-form :model="addForm" :rules="addFormRules"
               ref="addFormRef" label-width="100px">
      <el-form-item label="用户姓名" prop="username">
        <el-input v-model="addForm.username"
                  placeholder="请输入用户姓名"></el-input>
      </el-form-item>
      <el-form-item label="电话" prop="tel">
        <el-input v-model="addForm.tel"
                  placeholder="请输入联系方式"></el-input>
      </el-form-item>
      <el-form-item label="用户身份" prop="roleID">
        <el-switch v-model="addForm.roleIDTip"
                   style="display: block;padding-top: 10px"
                   active-color="#13ce66"
                   inactive-color="#ff4949"
                   active-text="员工"
                   inactive-text="老板">
        </el-switch>
      </el-form-item>
    </el-form>

<!--    底部区域-->
    <span slot="footer" class="dialog-footer">
    <el-button @click="addDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addUser">确 定</el-button>
  </span>
  </el-dialog>

  <!--  添加用户成功的表单对话框-->
  <el-dialog title="新添成功"
             :visible.sync="successDialogVisible" width="50%"
             @close="successDialogClosed">
    <!--    内容主题区域-->
    <el-descriptions class="margin-top" :model="successForm" title="账户信息" :column="3"  border>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          用户名
        </template>
        {{ successForm.username }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-star-on"></i>
          用户账号
        </template>
        {{ successForm.userID }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-key"></i>
          用户密码
        </template>
        {{ successForm.password }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-open"></i>
          账号权限
        </template>
        {{ successForm.roleIDTip }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-phone-outline"></i>
          电话
        </template>
        {{ successForm.tel }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-date"></i>
          入职时间
        </template>
        {{ successForm.hireDate }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-tickets"></i>
          是否在职
        </template>
        {{ successForm.isOnJobTip }}
      </el-descriptions-item>
    </el-descriptions>

    <!--    底部区域-->
    <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="successDialogVisible=false">确 定</el-button>
  </span>
  </el-dialog>

  <!--  修改用户的对话框-->
  <el-dialog title="修改用户"
             :visible.sync="editDialogVisible" width="50%">
    <!--    内容主题区域-->
    <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="100px">
      <el-form-item label="账号" prop="userID">
        <el-input v-model="editForm.userID" disabled></el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="username">
        <el-input v-model="editForm.username" ></el-input>
      </el-form-item>
      <el-form-item label="账号权限" prop="roleID">
        <el-switch v-model="editForm.roleIDTip"
                   style="display: block;padding-top: 10px"
                   active-color="#13ce66"
                   inactive-color="#ff4949"
                   active-text="员工"
                   inactive-text="老板">
        </el-switch>
      </el-form-item>
      <el-form-item label="电话" prop="tel">
        <el-input v-model="editForm.tel"
                  placeholder="请输入联系方式"></el-input>
      </el-form-item>
      <el-form-item label="是否在职" prop="isOnJobTip" >
        <el-input v-model="editForm.isOnJobTip" disabled></el-input>
      </el-form-item>
      <el-form-item label="入职时间" prop="hireDate" >
        <el-input v-model="editForm.hireDate" disabled></el-input>
      </el-form-item>
      <el-form-item label="是否在职" prop="password" >
        <el-input v-model="editForm.password"disabled></el-input>
      </el-form-item>

    </el-form>

    <!--    底部区域-->
    <span slot="footer" class="dialog-footer">
    <el-button @click="editDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="editUserInfo">确 定</el-button>
  </span>
  </el-dialog>
</div>
</template>

<script>
export default {
  name: 'StaffItem',
  data(){
    return{
      userList:[
      ],
      searchUserIDorName:'',
      searchUserState:true,
      //控制添加用户对话框的显示与隐藏
      addDialogVisible:false,
      //控制添加用户成功后的对话框的显示与隐藏
      successDialogVisible:false,
      //控制修改用户的对话框的显示与隐藏
      editDialogVisible:false,
      //添加用户的表单数据
      addForm:{
        username:'',
        roleID:'',
        tel:'',
        roleIDTip:true
      },
      //添加用户成功后的帐号信息
      successForm:{
        userID: '',
        username: '',
        password: '',
        roleID: '',
        isOnJob: '',
        tel: '',
        hireDate: '',
        roleIDTip:'',
        isOnJobTip:''
      },
      //添加表单的验证规则对象
      addFormRules:{
        username:[
          {required:true,message:'用户姓名不得为空',trigger:'blur'},
        ],
        tel:[
          {required:true,message:'联系方式不得为空',trigger:'blur'},
        ]
      },
      //修改用户的表单数据
      editForm:{
      },
      //修改用户的表单验证规则
      editFormRules:{
        username:[
          {required:true,message:'用户姓名不得为空',trigger:'blur'}
        ],
        tel:[
          {required:true,message:'联系方式不得为空',trigger:'blur'}
        ]
      },

    }
  },
  created () {
    this.getUserItem()
  },
  methods: {
    //post请求获取员工信息
    async getUserItem () {
      const { data: res } =
        await this.$http.post('/findAllUsers', [])
      if (res.code == 10401) {
        await this.$router.push('/login')
        return this.$message.error('您没有权限，请重新登陆！')
      }
      if (res.code == 10404)
        return this.$message.error('无员工！')
      if (res.code == 10200) {
        this.$message.success('刷新用户成功！');
        let item=[]
        let idTip = ''
        let onJobTip = ''
        res.data.forEach(function(value, index) {
          if (value.roleID == 100)
            idTip = '老板'
          else {
            idTip='员工'
          }
          if (value.isOnJob == true)
            onJobTip = '在职'
          else {
            onJobTip = '已离职'
          }
          let queryInfo = {
            userID: value.userID,
            username: value.username,
            password: value.password,
            roleID: value.roleID,
            isOnJob: value.isOnJob,
            tel:value.tel,
            hireDate: value.hireDate,
            roleIDTip: idTip,
            isOnJobTip: onJobTip
          }
          item=item.concat(queryInfo)
        })
        this.userList=item
        console.log(this.userList)
      }
    },
    //查找用户
    async searchUser(){
      if(!this.searchUserIDorName)
        return this.$message.error('查询失败，请输入用户账号或姓名！')
      console.log({userIdOrName:this.searchUserIDorName,isOnJob:this.searchUserState})
      const{data:res}=
        await this.$http.post('/findUser',
          {userIdOrName:this.searchUserIDorName,isOnJob:this.searchUserState})
      if (res.code == 10401) {
        await this.$router.push('/login')
        return this.$message.error('您没有权限，请重新登陆！')
      }
      if (res.code == 10404) return this.$message.error('未查询到用户！')
      if (res.code == 10412) return this.$message.error('请求错误！')
      if (res.code == 10200){
        let item=[]
        let idTip = ''
        let onJobTip = ''
        res.data.forEach(function(value,index) {
          console.log(value)
          if (value.roleID == 100)
            idTip = '老板'
          else {
            idTip='员工'
          }
          if (value.isOnJob == true)
            onJobTip = '在职'
          else {
            onJobTip = '已离职'
          }
          let queryInfo= {
            userID: value.userID,
            username: value.username,
            password: value.password,
            roleID: value.roleID,
            isOnJob: value.isOnJob,
            tel: value.tel,
            hireDate: value.hireDate,
            roleIDTip: idTip,
            isOnJobTip: onJobTip
          }
          item=item.concat(queryInfo)
        })
        this.userList=item
        return this.$message.success('查找成功！')
      }
    },
    //监听添加用户对话框的关闭事件
    addDialogClosed(){
      this.$refs.addFormRef.resetFields()
    },
    //监听添加用户成功对话框的关闭事件
    successDialogClosed(){
      this.$refs.successFormRef.resetFields()
      this.successForm.userID=''
      this.successForm.username=''
      this.successForm.password= ''
      this.successForm.roleID= ''
      this.successForm.isOnJob= ''
      this.successForm.tel= ''
      this.successForm.hireDate= ''
      this.successForm.roleIDTip= ''
      this.successForm.isOnJobTip=''
    },
    //点击按钮添加新用户
    addUser(){
      this.$refs.addFormRef.validate(async valid=>{
        if(!valid) return this.$message.error('添加失败，请输入新用户姓名和电话！')
        //可以添加用户的网络请求
        if(this.addForm.roleIDTip==true)
          this.addForm.roleID=111
        else
          this.addForm.roleID=100
        const { data: res } =
          await this.$http.post('/addUser', {
            username:this.addForm.username,
            roleID: this.addForm.roleID,
            tel: this.addForm.tel
          })
        if (res.code == 10401) {
          await this.$router.push('/login')
          return this.$message.error('您没有权限，请重新登陆！')
        }
        if (res.code == 10412)
          return this.$message.error('请求失败！')
        if (res.code == 10200) {
          //隐藏添加用户的对话框
          this.addDialogVisible = false
          this.$message.success('添加成功！')
          //重新获取用户列表数据
          await this.getUserItem()
          this.successForm.userID=res.data.userID
          this.successForm.username=res.data.username
          this.successForm.password=res.data.password
          this.successForm.roleID=res.data.roleID
          this.successForm.isOnJob=res.data.isOnJob
          this.successForm.tel=res.data.tel
          this.successForm.hireDate=res.data.hireDate
          if(this.successForm.roleID==100)
            this.successForm.roleIDTip='老板'
          else
            this.successForm.roleIDTip='员工'
          if(this.successForm.isOnJob)
            this.successForm.isOnJobTip='在职'
          else
            this.successForm.isOnJobTip='已离职'
          this.successDialogVisible=true
        }
      })
    },
    //展示编辑用户的对话框
    showEditDialog(user){
      //user为选中行用户的全部信息，传入便于修改
      this.editForm=user
      //如果员工已离职不能修改
      if(!this.editForm.isOnJob)
        return this.$message.error('用户已离职，不能修改')
      if(this.editForm.roleID==100) //默认员工为true
        this.editForm.roleIDTip=false
      else
        this.editForm.roleIDTip=true
      this.editDialogVisible=true
    },
    //修改用户信息并提交
    editUserInfo(){
      this.$refs.editFormRef.validate(async valid=>{
        if(!valid) return this.$message.error('修改失败，请正确输入！')
        //可以添加用户的请求
        if(this.editForm.roleIDTip==true)
          this.editForm.roleID=111
        else
          this.editForm.roleID=100
        const { data: res } =
          await this.$http.post('/editUser', {
            userID:this.editForm.userID,
            username:this.editForm.username,
            roleID: this.editForm.roleID,
            tel: this.editForm.tel
          })
        if (res.code == 10401) {
          await this.$router.push('/login')
          return this.$message.error('您没有权限，请重新登陆！')
        }
        if (res.code == 10404)
          return this.$message.error('未查询到用户！')
        if (res.code == 10412)
          return this.$message.error('请求失败！')
        if (res.code == 10200) {
          //隐藏修改用户信息的对话框
          this.editDialogClosed()
          this.$message.success('修改成功！')
          //重新获取用户列表数据
          await this.getUserItem()
        }
      })
    },
    //监听修改用户对话框的关闭事件
    editDialogClosed(){
      this.editDialogVisible=false
      this.editForm={}
    },
    //根据ID用户离职
    async removeUserByID(id){
      //弹框询问用户是否离职，
      const confirmResult=await this.$confirm('此操作将永久办理用户离职，且账户不可再登录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err=>err)//返回会触发错误，接受
      //如果用户确认删除，返回字符串 confirm
      //如果用户确认删除，返回字符串 cancel
      if(confirmResult!='confirm')
        return this.$message.info('已取消离职')
      //确认删除发起请求
      const { data: res } =
        await this.$http.post('/dismissUser', { userID:id })
      if (res.code == 10401) {
        await this.$router.push('/login')
        return this.$message.error('您没有权限，请重新登陆！')}
      if (res.code == 10404)
        return this.$message.error('未查询到用户！')
      if (res.code == 10412)
        return this.$message.error('请求失败！')
      if (res.code == 10200) {
        this.$message.success('办理离职成功，该用户不可再登录')
        await this.getUserItem()
      }
    }
  }
}
</script>

<style lang="less" scoped>
.text {
  font-size: 14px;
}
.item {
  padding: 18px 0;
}
.el-popover {
  height: 200px;
  overflow: auto;
}
</style>
